<template>
    <div class="app-container">
        <div style="width:100%">
            <el-row justify="space-between">
                <el-col :span="typeState?18:24" style="margin-top:20px">
                    <LitigationApplicationLitigation :info="form" />
                    <LitigationApplicationOrder :info="form"/>
                    <div class="card-wrap flex-column justify-end card-padding">
                        <div class="card-title-wrap">
                            <span>申请信息</span>
                            <span></span>
                        </div>
                        <el-descriptions title="" :column=2> 
                            <el-descriptions-item label="变更诉讼原因">
                                {{ form.proceedReason|filterNull }}
                            </el-descriptions-item>
                            <el-descriptions-item label="修改前累计未结清费用">
                                {{ form.oldAllNoPayoffCost|filterNull }}
                            </el-descriptions-item>
                            <el-descriptions-item label="附件上传" >
                                <div class="flex">
                                    <ImageCommon disabled v-model="form.changeFile" :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                        
                    </div>
                    <!-- 合同期内已生成账单未结清费用--修改 -->
                    <div class="card-wrap flex-column justify-end card-padding">
                                <div class="card-title-wrap">
                                    <span>合同期内已生成账单未结清费用--修改</span>
                                    <span></span>   
                                </div>
                                <div v-for="(item,index) in form.changeVoBillList" :key="item.id">
                                    <div class="title_box">
                                        <div>
                                            <span class="title_text">车牌号:{{ item.carCode }}</span>    
                                        </div>
                                    </div>
                                    <el-table fit :data="item.changeVoBillList" border style="margin-top:10px;margin-bottom: 10px;" >
                                        <el-table-column prop="costTypeStr" label="费用类型"  align="center" > </el-table-column>
                                        <el-table-column prop="periodsNum" label="期数"  align="center" >
                                            <template slot-scope="scope">
                                                <span>{{ scope.row.periodsNum || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="oldCost" label="修改前费用(元)" align="center">
                                            <template slot-scope="scope">
                                                <span>{{ format_thousand(scope.row.oldCost) }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="cost" label="修改后费用(元)" align="center">
                                            <template v-slot="{row}">
                                                <el-input v-model="row.cost" :disabled="formState && formState !== 'write'" v-thousand oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                            </template>
                                        </el-table-column> 
                                        
                                    </el-table>
                            </div>
                            
                    </div>
                    <!-- 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改 -->
                    <div class="card-wrap flex-column justify-end card-padding">
                        <div class="card-title-wrap">
                            <span>合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改</span>
                            <span></span>   
                        </div>
                        <div v-for="(item,index) in newFessList" :key="item.id">
                            <div class="title_box">
                                <div>
                                    <span class="title_text">车牌号:{{ item.carCode }}</span>
                                </div>
                            </div>
                            <el-table fit :data="item.definitionList" border style="margin-top:10px;margin-bottom: 10px;" >
                                <el-table-column prop="costType" label="费用类型"  align="center" > </el-table-column>
                                <el-table-column prop="cost" label="修改前费用(元)" align="center">
                                    <template slot-scope="scope">
                                        <span>{{ format_thousand(scope.row.cost) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="changeAmount" label="修改后费用(元)" align="center">
                                    <template v-slot="{row}">
                                        <el-input v-model="row.changeAmount" :disabled="formState && formState !== 'write'" v-thousand oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                    </template>
                                </el-table-column> 
                            </el-table>
                        
                        </div>
                        
                    </div>
                    <!-- 合同期内或合同期外未还车发生诉讼产生的未结清费用--新费用项 -->
                    <div class="card-wrap flex-column justify-end card-padding">
                        <div class="card-title-wrap">
                            <span>合同期内或合同期外未还车发生诉讼产生的未结清费用--新费用项</span>
                            <span></span>   
                        </div>
                        <div v-for="(item,index) in newFessList1" :key="item.id">
                            <div class="title_box">
                                <div>
                                    <span class="title_text">车牌号:{{ item.carCode }}</span>
                                </div>
                            </div>
                            <el-table fit :data="item.definitionList" border style="margin-top:10px;margin-bottom: 10px;" >
                                <el-table-column prop="costType" label="费用项类型" align="center"></el-table-column> 
                                <el-table-column prop="cost" label="费用金额(元)" align="center">
                                    <template v-slot="{row}">
                                        <el-input v-model="row.cost" :disabled="formState && formState !== 'write'" v-thousand oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                    </template>
                                </el-table-column> 
                            </el-table>
                        
                        </div>
                        
                    </div>
                    <!-- 其他未结清费用-现费用项修改 -->
                    <div class="card-wrap flex-column justify-end card-padding">
                        <div class="card-title-wrap">
                            <span>其他未结清费用-现费用项修改</span>
                            <span></span>
                        </div>
                            <el-table fit :data="form.changeCostOtherListEdit" border style="margin-top:10px;margin-bottom: 10px;" >
                                <el-table-column prop="costTypeStr" label="费用类型"  align="center" ></el-table-column>
                                <el-table-column prop="oldCost" label="修改前费用(元)" align="center">
                                    <template slot-scope="scope">
                                        <span>{{ format_thousand(scope.row.oldCost) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cost" label="修改后费用(元)" align="center">
                                    <template v-slot="{row}">
                                        <el-input v-model="row.cost" :disabled="formState && formState !== 'write'" v-thousand oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                    </template>
                                </el-table-column> 
                            </el-table>
                    </div>
                    <!-- 其他未结清费用-新费用项 -->
                    <div class="card-wrap flex-column justify-end card-padding">
                        <div class="card-title-wrap">
                            <span>其他未结清费用-新费用项</span>
                            <span></span>
                        </div>
                        <el-table fit :data="form.changeCostOtherListEditAdd" border style="margin-top:10px;margin-bottom: 10px;" >
                            <el-table-column prop="costTypeStr" label="费用类型"  align="center" ></el-table-column>
                            <el-table-column prop="cost" label="费用金额(元)" align="center">
                                <template v-slot="{row}">
                                    <el-input v-model="row.cost" :disabled="formState && formState !== 'write'" v-thousand oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="file" label="附件" align="center">
                                <template v-slot="{row}">
                                    <ImageCommon  info="" :up-type="2" :limit="20" v-model="row.file" :disabled="formState && formState !== 'write'" v-thousand></ImageCommon>
                                </template>
                                
                            </el-table-column> 
                        </el-table>
                    </div>   
                </el-col>
                <el-col :span="typeState?5:0" :offset="1">
                    <FlowRecord v-if="typeState" :id="flowId"></FlowRecord>
                </el-col>
            </el-row>
        </div>
      
           
        
        <div class="card-wrap flex justify-end card-padding" v-if="type">
            <el-button @click="cancel">取消</el-button>
            <el-button  type="primary" @click="submitForm">提交</el-button>
        </div>
        <div class="card-wrap flex justify-end card-padding" v-if="typeState">
            <el-button @click="cancel">返回</el-button>
        </div>
    </div>
</template>

<script>

import LitigationApplicationOrder from '@/views/collectionManagement/litigationApplication/compoent/order.vue'
import LitigationApplicationLitigation from '@/views/collectionManagement/litigationApplication/compoent/litigation.vue'
import * as apis from "@/api/collectionManagement/litigationApplication";
import { watch } from 'vue-demi';
export default {
    name: "WorkerChangeInfo",
    components: {LitigationApplicationOrder,LitigationApplicationLitigation},
    dicts: [ 'progress_litigation'],
    data() {
        return {
            status:1,
         
            newFessList:[],
            newFessList1:[],
            info:{
                order:{

                },
                litigation:{

                }
            },
           
            type:'',
            typeState:false,
            flowId:'2587501',
            jsonValue:[],
        };
    },
    props: {
        value: {
            default: {},
        },
        state: {
            default: "write",
        },
        formStatus: {
            required: false,
        },
    },
    computed:{
        formState: {
            get() {
                let state = "write";
                if (Reflect.has(this, "formStatus")) {
                    switch (this?.formStatus?.toString()) {
                        case "0":
                            state = "write";
                            break;
                        case "1":
                            state = "disabled";
                            break;
                        case "2":
                            state = "hidden";
                            break;
                        default:
                            state = this.state;
                            break;
                    }
                }
                return state;
            },
        },
        form:{
            get() {
                this.newFessList = []
                this.newFessList1 = []
                if(typeof this.value.overdueChangeOldJson=='string'){
                    this.newFessList = JSON.parse(this.value.overdueChangeOldJson)
                }else{
                    this.newFessList = this.value.overdueChangeOldJson
                }
                if(typeof this.value.overdueChangeNewJson=='string'){
                    this.newFessList1 = JSON.parse(this.value.overdueChangeNewJson)
                }else{
                    this.newFessList1 = this.value.overdueChangeNewJson
                }
                
                return this.value;
            },
            set(value) {
                this.$emit("input", value);
            },
        },
    }, 
    watch:{
        jsonValue:{
            deep:true,
            handler(val){
                this.jsonValue = val
            }
        },
        
        'newFessList':{
            deep:true,
            handler(val){
                this.newFessList = val
            },
    
        },
        'newFessList1':{
            deep:true,
            handler(val){
                this.newFessList1 = val
            }
        },
    },
    async created(){
       this.type = this.$route?.query?.type
       this.typeState =  this.$route?.query?.typeState?true:false
       let list1 = this.value?.overdueJson
       if(typeof list1=='string'){
            list1 = JSON.parse(list1)
        }
       this.jsonValue = JSON.parse(JSON.stringify(list1))
    },
    methods: {
        dataProcessing(){
            let list1 = [...this.newFessList,...this.newFessList1]
            // 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改-数据处理
            let newFessListJson = JSON.parse(JSON.stringify(list1))
            let newArr = [];
            newFessListJson.forEach((item) => {
                const parent = newArr.find((c) => c.carCode === item.carCode);
                if (parent) {
                    parent.definitionList.push(...item.definitionList);
                    parent.definitionList = Array.from(new Set(parent.definitionList));
                } else {
                    const obj = {
                    carCode: item.carCode,
                    definitionList: item.definitionList
                    };
                    newArr.push(obj);
                }
            });
            newArr.forEach((res)=>{
                res.definitionList = [...new Map(res.definitionList?.map(item => [item.costType, item])).values()]
            })
            let list5= []
            newArr?.map((res)=>{
                if(res?.carCode){
                    let obj = {}
                    this.$set(obj,'carCode',res?.carCode)
                    if(res?.definitionList){
                        let typeList = []
                        res?.definitionList?.map((item)=>{
                            if(item.costType=='超期租金'){
                                this.$set(obj,'overdueCost',item?.changeAmount)
                            }else if(item.costType=='违约金'){
                                this.$set(obj,'defaultCost',item?.changeAmount)
                            }else if(item.costType=='违章费'){
                                this.$set(obj,'peccanCost',item?.changeAmount)
                            }else if(item.costType=='车损费用'){
                                this.$set(obj,'carDamageCost',item?.changeAmount)
                            }else if(item.costType=='加速折旧费'){
                                this.$set(obj,'depreciationCost',item?.changeAmount)
                            }else if(item.costType=='超里程费'){
                                this.$set(obj,'overMileageCost',item?.changeAmount)
                            }else if(item.costType=='尾款'){
                                this.$set(obj,'balanceCost',item?.changeAmount)
                            }else if(item.costType=='客户理赔款'){
                                this.$set(obj,'customClaimCost',item?.changeAmount)
                            }else if(item.costType=='其他扣款费用'){
                                this.$set(obj,'otherCost',item?.changeAmount)
                            }else{
                                if(item?.changeAmount){
                                    this.$set(obj,item.costType,item?.changeAmount)
                                }else{
                                    this.$set(obj,item.costType,item?.cost)
                                } 
                                typeList.push(item.costType)

                            }
                        })
                        this.$set(obj,'costJson',typeList) 
                    }
                    list5.push(obj)
                }
            })
            let arr = []
            this.form?.overdueJson?.map((res)=>{
                const bItem = list5.find(bItem => bItem.carCode === res.carCode);
                if(bItem){
                    let obj = { ...res, ...bItem }
                    arr.push(obj)
                }else{
                    arr.push(res)
                }
            })
            let costJsonList = []
            arr?.map((res)=>{
                res?.costJson?.map((item)=>{
                    costJsonList.push(item)
                })
            })
            arr[0].costJson = Array.from(new Set(costJsonList))
            return arr
        },
        async flow_submit() {
            let list =  await this.dataProcessing()
            this.$set(this.form,'overdueJson',JSON.stringify(list))
            this.$set(this.form,'overdueChangeOldJson',JSON.stringify(this.newFessList))
            this.$set(this.form,'overdueChangeNewJson',JSON.stringify(this.newFessList1))
        },
        cancel(){
            this.$router.push({ name: 'LitigationApplication',})
        },
        async submitForm(){
            const loading = this.$loading({
                lock: true,
                text: '保存中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            let list =  await this.dataProcessing()
            this.$set(this.form,'overdueJson',JSON.stringify(list))
            this.$set(this.form,'overdueChangeOldJson',JSON.stringify(this.newFessList))
            this.$set(this.form,'overdueChangeNewJson',JSON.stringify(this.newFessList1))
            this.$set(this.form,'flag',true)
            apis.submitChangeLitigation(this.form).then((res)=>{
                    if(res.code==200){
                        loading.close()
                        this.$message.success('发起成功')
                        this.$router.push({name:'LitigationApplication'})
                    }
                }).catch(()=>{
                    loading.close()
                })
        }
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}
</style>
